Step 2 of 3: Adding C1TreeView Items toC1TreeView

This lesson will show you how to add static C1TreeView items to the C1TreeView control. To add static C1TreeViewItems to the C1TreeView control in the XAML, complete the following steps:

Add the C1TreeViewItem to create the top-level node called "Book List". Within the <Xaml:C1TreeViewItem> tag add Header="Book List". This will create a top-level node that at run time. The XAML markup appears as follows:

Markup	Copy Code
<Xaml:C1TreeViewItem Header="Book List"></Xaml:C1TreeViewItem>

Add two child C1TreeViewItems below the <Xaml:C1TreeViewItem> tag to create two child nodes beneath the Book List node and add Header="Language Books". In the second child node add Header="Security Books". The XAML markup appears as follows:

Markup	Copy Code
<Xaml:C1TreeViewItem Header="Language Books"/> <Xaml:C1TreeViewItem Header="Security Books"/>

Add another <Xaml:C1TreeViewItem> tag to create a new top level node that will hold two child nodes. The XAML markup appears as follows:

Markup	Copy Code
<Xaml:C1TreeViewItem Header="Classic Books"> <Xaml:C1TreeViewItem Header="Catch-22"/> <Xaml:C1TreeViewItem Header="The Great Gatsby"/>

Add two closing <Xaml:C1TreeViewItem> tags to close the Book List node and Classic Books node. You should have all of the following XAML markup now included in your MainPage.xaml:

Markup	Copy Code
<Page xmlns:Xaml="using:C1.Xaml" x:Class="C1TreeViewQuickStart.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:C1TreeViewQuickStart" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Xaml:C1TreeView x:Name="Tree"> <Xaml:C1TreeViewItem Header="Book List"> <Xaml:C1TreeViewItem Header="Language Books"/> <Xaml:C1TreeViewItem Header="Security Books"/> <Xaml:C1TreeViewItem Header="Classic Books"> <Xaml:C1TreeViewItem Header="Catch-22"/> <Xaml:C1TreeViewItem Header="The Great Gatsby"/> </Xaml:C1TreeViewItem> </Xaml:C1TreeViewItem> </Xaml:C1TreeView> </Grid> </Page>

Markup

Copy Code

<Page xmlns:Xaml="using:C1.Xaml" x:Class="C1TreeViewQuickStart.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:C1TreeViewQuickStart" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Xaml:C1TreeView x:Name="Tree">
         <Xaml:C1TreeViewItem Header="Book List">
                <Xaml:C1TreeViewItem Header="Language Books"/>
                <Xaml:C1TreeViewItem Header="Security Books"/>
                <Xaml:C1TreeViewItem Header="Classic Books">
                    <Xaml:C1TreeViewItem Header="Catch-22"/>
                    <Xaml:C1TreeViewItem Header="The Great Gatsby"/>
                </Xaml:C1TreeViewItem>
         </Xaml:C1TreeViewItem>
</Xaml:C1TreeView>
    </Grid>
</Page>

Run the project and notice that the Book node is not expanded. You can expand it by clicking on the arrow image.

In this step, you added several C1TreeViewItems to the C1TreeView control. In the next step, you will customize the behavior and appearance of the C1TreeView control.